<template>
  <div>
    <div class="top-panel">
      <el-card class="box-card">
        <el-form ref="searchForm" :model="searchForm" label-width="80px" label-position="right">
          <el-row>
            <el-col :span="5">
              <el-form-item size="small" label="操作日期" prop="startDateStr" :style="{ float: 'left' }">
                <el-date-picker
                  :style="{ width: '100%' }"
                  v-model="searchForm.createDateRang"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item size="small" label="操作人">
                <el-input class="password-input" v-model="searchForm.userNameFuzzy" clearable placeholder="支持模糊搜索" @keyup.enter.native="loadDataList"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item size="small" label="操作内容">
                <el-input class="password-input" v-model="searchForm.opDescriptionFuzzy" clearable placeholder="支持模糊搜索" @keyup.enter.native="loadDataList"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" :style="{ paddingLeft: '10px', 'padding-top': '3px' }">
              <el-button type="success" size="mini" @click="loadDataList()">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <el-card>
      <div class="data-panel">
        <Table :fetch="loadDataList" :columns="tableColumns" :dataSource="tableData" :options="tableOptions" />
      </div>
    </el-card>
    <!--编辑修改-->
    <Dialog :title="editDialog.title" :visible="editDialog.show" @close="editDialog.show = false" :buttons="editDialog.buttons"> </Dialog>
    <!--错误详情-->
    <Dialog :title="errorDialog.title" :visible="errorDialog.show" @close="errorDialog.show = false" :buttons="errorDialog.buttons" :showCancel="false">
      <div :style="{ 'min-height': '50px', color: 'red' }">
        {{ errorMsg }}
      </div>
    </Dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchForm: {},
      api: {
        loadList: '/settings/loadLogList',
      },
      searchForm: {},
      tableData: {},
      tableColumns: [
        {
          prop: 'id',
          label: '操作ID',
          width: '100',
        },
        { prop: 'opObjectName', label: '操作对象', width: '150' },
        { prop: 'opDescription', label: '操作内容' },
        { prop: 'userName', label: '操作人', width: '100' },
        { prop: 'ip', label: 'IP', width: '110' },
        { prop: 'ipAddress', label: 'IP所在地', width: '150' },
        { prop: 'createTime', label: '操作时间', width: '200' },
        {
          prop: 'opResultName',
          label: '操作结果',
          width: '100',
          render: (row, index) => {
            return <div>{row.opResult == 200 ? <div style="color:green">{row.opResultName}</div> : <div style="color:red"> {row.opResultName}</div>}</div>
          },
        },
        {
          prop: 'errorMsg',
          label: '错误信息',
          width: '100',
          render: (row, index) => {
            return (
              <div>
                {row.opResult !== 200 ? (
                  <el-button type="danger" size="mini" onClick={() => this.showError(row)}>
                    查看
                  </el-button>
                ) : null}
              </div>
            )
          },
        },
      ],
      tableOptions: {
        topHeight: 60,
      },
      editDialog: {
        title: '新增计费规则',
        show: false,
        buttons: [
          {
            type: 'primary',
            text: '确定',
            click: () => {
              this.submitForm()
            },
          },
        ],
      },
      errorDialog: {
        title: '错误详情',
        show: false,
        buttons: [
          {
            type: 'primary',
            text: '关闭',
            click: () => {
              this.errorDialog.show = false
            },
          },
        ],
      },
      errorMsg: '',
    }
  },
  methods: {
    async loadDataList() {
      let params = {
        pageNo: this.tableData.pageNo,
        pageSize: this.tableData.pageSize,
      }
      Object.assign(params, this.searchForm)

      if (params.createDateRang) {
        params.createTimeStart = params.createDateRang[0]
        params.createTimeEnd = params.createDateRang[1]
      }

      let result = await this.Request({
        url: this.api.loadList,
        params: params,
      })
      this.tableData = result
    },
    showError(row) {
      this.errorMsg = row.errorMsg
      this.errorDialog.show = true
    },
  },
  created() {},
}
</script>
<style lang="less" scoped>
.billing-type-input {
  width: 120px;
  margin: 0px 5px;
}
</style>
